<template>
	<view class="body">
		<view class="top">
			<u-navbar title="余额明细" bgColor="#2393FF" leftIconColor="#FFFFFF" 
			:titleStyle="{color:'#FFFFFF'}" :autoBack="true" >
			</u-navbar>
			<view class="topData flex-between">
				<view class="left">
					<view class="title">可用余额(元)</view>
					<view class="price"> <text class="pIcon">￥</text> {{nowMoney || 0}}</view>
				</view>
				<button class="right" @click="goBack">余额管理</button>
			</view>
		</view>
		<!-- 余额明细 -->
		<view class="promote">
			<view class="title flex">
				<view class="lineText"></view>余额明细
			</view>
			<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex'
			@onSelected='onSelected' ></ren-dropdown-filter>
			<view class="item" v-for="(item,index) in recordList" :key="index" v-if="recordList.length>0">
				<view class="contain">
					<view class="left flex">
						<image class="userAvatar2" :src="markMap[item.mark].icon" mode="">
						</image>
						<view style="flex: 1;">
							<view class="flex-between" style="margin-top: -10rpx;">
								<text class=" bName">{{markMap[item.mark].name || '未知类型'}}</text>
								<text class="vip" :class="item.addCut == 1?'addColor':'desColor'" >{{item.addCut == 1?'+'+item.money:'-'+item.money}}</text>
							</view>
							<view class="phoneBox">创建时间:{{item.createTime}}</view>
						</view>
					</view>
				</view>
			</view>
			<view v-if="recordList.length == 0">
				<emptyPage title='暂无余额明细~'></emptyPage>
			</view>
		</view>
		
		
		<!-- #ifdef MP -->
		<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
		<!-- #endif -->
		<home></home>
	</view>
</template>

<script>
	import {
		getCommissionInfo,
		getRecordApi,
	} from '@/api/user.js';
	import {
		getBalanceList,
		getInfo,
	
	} from '@/api/xing.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import emptyPage from '@/components/emptyPage.vue'
	import home from '@/components/home';
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			emptyPage,
			home,
			RenDropdownFilter
		},
		filters: {
			statusFilter(status) {
				const statusMap = {
					'-1': '未通过',
					'0': '审核中',
					'1': '已提现'
				}
				return statusMap[status]
			}
		},
		data() {
			return {
				name: '提现总额',
				type: 0,
				page: 1,
				limit: 10,
				recordList: [],
				recordType: 4,
				statuss: false,
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				extractCount: 500.00,
				commissionCount: 1000.00,
				nowMoney: "",
				markMap: {
					'0': {name:'充值入账',icon:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/yongjin_icon5.png'},
					'1': {name:'订单支付',icon:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/yue_icon1.png'},
					'2': {name:'余额转赠',icon:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/yue_icon2.png'},
					'3': {name:'佣金转入',icon:'https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/yongjin_icon6.png'},
				},
				filterData:[
				    [{ text: '默认排序', value: '' }, { text: '充值入账', value: 0 }, { text: '订单支付', value: 1 }, { text: '余额转赠', value: 2 }, { text: '佣金转入', value: 3 }]
				],
				defaultIndex:[0],
				mark:''
			};
		},
		computed: mapGetters(['isLogin']),
		onShow() {
			this.getRecordList();
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				getInfo().then(res => {
					this.nowMoney = res.data.nowMoney
				})
			},
			getRecordList() {
				let that = this;
				getBalanceList({
					pageNum: that.page,
					pageSize: that.limit,
					mark:this.mark
				}).then(res => {
					if (res.rows && res.rows.length > 0) {
						this.recordList = [...this.recordList, ...res.rows];
						this.page++;
					}
				});
			},
			// 跳转到余额管理
			goBack(){
				uni.navigateTo({
					url:"/pages/users/user_money/index"
				})
			},
			onSelected(res){
			    console.log(res);
				this.recordList = []
				this.page = 1
				this.mark = res[0][0].value
				this.getRecordList();
			},
		},
		onReachBottom: function() {
			this.getRecordList();
		}
	}
</script>

<style scoped lang="scss">
	
	.body{
		position: relative;
	}
	.top{
		width: 100%;
		height: 428rpx;
		background-image: url('https://store-profit-system.oss-cn-shanghai.aliyuncs.com/gerenzhongxin/tixian1.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.topData{
		padding: 248rpx 56rpx 46rpx;
		.left{
			color: #FFFFFF;
			.title{
				font-size: 24rpx;
			}
			.price{
				margin-top: 14rpx;
				;
				font-weight: bold;
				font-size: 72rpx;
				text-shadow: 0px 2px 4px rgba(0,0,0,0.16);
				.pIcon{
					font-size: 32rpx;
				}
			}
		}
		.right{
			width: 166rpx;
			height: 54rpx;
			line-height: 54rpx;
			text-align: center;
			background: #FFFFFF;
			box-shadow: 0px 6px 12px 2px rgba(204,204,204,0.16);
			border-radius: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-size: 24rpx;
			color: #2393FF;
		}
	}
	.promote{
		margin: 24rpx 32rpx;
		padding: 32rpx 32rpx;
		background: #FFFFFF;
		box-shadow: 0px 6px 12px 0px rgba(204,204,204,0.1569);
		border-radius: 12rpx;
		.title {
			font-weight: 700;
			font-size: 32rpx;
			color: #28314C;
			margin-bottom: 14rpx;
			font-family: "Alibaba PuHuiTi 2.0-85 Bold"
		}
		
		.lineText {
			width: 8rpx;
			height: 34rpx;
			background: #2393FF;
			border-radius: 4px 4px 4px 4px;
			margin-right: 12rpx;
		}
		.sort{
			font-size: 24rpx;
			color: #637697;
			padding: 0rpx 0 8rpx 0;
			border-bottom: 2rpx solid #E5E5E5;
			image{
				width: 23rpx;
				height: 21rpx;
				margin-left: 10rpx;
			}
		}
		.item{
			position: relative;
			margin-top: 24rpx;
			padding: 24rpx 30rpx 24rpx 24rpx;
			background: linear-gradient( 180deg, #CCE3FD 0%, #F4F9FF 16%, #FFFFFF 100%);
			box-shadow: 0px 6px 12px 0px rgba(204,204,204,0.1569);
			border-radius: 12rpx;
			.time{
				position: absolute;
				top: 0;
				left: 0;
				background: #0077FF;
				border-radius: 12rpx 0px 16rpx 0px;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 8rpx 40rpx 8rpx 24rpx;
			}
			.bottom{
				padding-top: 20rpx;
				.bItem{
					font-size: 24rpx;
					color: #637697;
					.num{
						;
						font-weight: 700;
						font-size: 40rpx;
						color: #2393FF;
						.pIcon{
							font-size: 24rpx;
						}
					}
					
				}
				.btn{
					width: 178rpx;
					height: 62rpx;
					line-height: 62rpx;
					background: #0077FF;
					border-radius: 42rpx;
					text-align: center;
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	.contain{
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left {
			width: 100%;
			.imgBox{
				width: 92rpx;
				height: 92rpx;
				background: #E7F5FC;
				border-radius: 14rpx;
				margin-right: 12rpx;
				.imgBox2{
					width: 76rpx;
					height: 76rpx;
					background: #FFFFFF;
					box-shadow: 0px 6px 12px 0px rgba(12,64,103,0.2);
					border-radius: 14rpx;
				}
			}
			.text{
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 700;
				font-size: 28rpx;
				color: #28314C;
				margin-top: -10rpx;
			}
			.phoneIcon {
				width: 18rpx;
				height: 22rpx;
				margin-right: 6rpx;
			}
			
			.phoneBox {
				margin: 2rpx 0 0 4rpx;
				font-size: 24rpx;
				color: #D2D2D2;
			}
			
			.vip {
				;
				font-weight: 700;
				font-size: 46rpx;
			}
			
			.mr32 {
				margin-right: 32rpx;
			}
		}
			
		.right {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 178rpx;
			height: 50rpx;
			background: #0077FF;
			border-radius: 42rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			image {
				width: 28rpx;
				height: 28rpx;
				margin-right: 14rpx;
			}
		}
	}
	.bName{
		font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
		font-weight: 700;
		font-size: 28rpx;
		color: #28314C;
	}
	.bPhone{
		;
		font-weight: 700;
		font-size: 24rpx;
		color: #637697;
	}
	.bTotal{
		font-size: 24rpx;
		color: #637697;
		text{
			font-family: DIN;
			font-weight: 700;
			font-size: 32rpx;
			color: #637697;
		}
	}
	.userAvatar2 {
		width: 92rpx;
		height: 92rpx;
		margin-right: 12rpx;
	}
	.addColor{
		color: #2393FF;
	}
	.desColor{
		color: #FF5953;
	}
</style>